/*
  学习目标：复用组件逻辑的三种方式- 👍自定义hooks
  本质:
    
*/

import React from "react";
import { useMouse } from "./05-复用逻辑-自定义hooks/hooks/useMouse";

export default function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

function Main() {
  const { mouse, handleMouseMove } = useMouse();

  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        Main- x: {mouse.x} -y: {mouse.y}
      </h1>
    </div>
  );
}

function Footer() {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x:{mouse.y} -y:{mouse.y}
    </h1>
  );
}

function Header() {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}
